<template>
    <el-dialog title="请选择屠宰厂" :visible.sync="dialogVisible" width="1024px" :close-on-click-modal="false" :show-close="false">
        <div style="padding:10px;overflow-y:auto" class="theAllCard">
            <el-card v-for="item in slaughter_info" :key="item.slaughteringId" style="margin-bottom:5px;width:33%">
                <!-- <el-avatar shape="square" :size="100" :src="item.picture"></el-avatar> -->
                <div style="display:inline-block;width:30%;height:100px;align-item:center">
                    <el-avatar shape="square" :size="120" :src="slaughterPicture"></el-avatar>
                </div>
                <el-card style="display:inline-block;width:67%;height:120px;" shadow="hover">
                    <el-divider content-position="left"><i style="font-weight:900;font-size:0.875rem">{{item.detailedAddress + '屠宰厂'}}</i></el-divider>
                    <div style="margin-top:40px;">
                        <i style="font-weight:500;font-size:0.75rem;">负责人：{{item.principalName}}</i>
                        <el-button style="float:right;" size="mini" plain type="primary" @click="selected(item)">选择</el-button>
                    </div>
                </el-card>
            </el-card>
        </div>
    </el-dialog>
</template>

<script>
// API 
import {
  getAllSlaughter, // 获取所有屠宰场
  } from "@/api/common"


export default {
    inject: ['reload'],
    
    data() {    
        return {

            slaughterPicture: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',

            // 获取屠宰场请求参数
            requestParam: {
                page: 1,
                size: 100
            },

            // 所有屠宰场信息
            slaughter_info: [],

            // 选择的基地信息
            slaughterInfo: false
        }
    },

    computed: {
        dialogVisible: function() {
            return this.$store.state.Switch.isShowSlaughterChocie
        }
    },

    created() {
        getAllSlaughter(this.requestParam).then(
            res => {
                // console.log(res);
                if( res ) {
                    // console.log(res);
                    const { records } = res.data.data
                    this.slaughter_info = records
                }
            }
        )
    },

    methods: {
        selected(item) {

            // 保存当前屠宰场信息
            this.$store.commit('setSlaughter',item)

            // 刷新页面
            this.reload()

            this.$store.commit('closeSlaughterChocie')
        }
    }

}
</script>

<style scoped>
.theAllCard {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center;
    align-items: center;
}
</style>